<template>  
  <view class="container">  
    <view class="tabs" v-model="activeTab" style="display: flex; flex-direction: column;" >  
      <button class="tab-item" v-for="(tab, index) in tabs" :key="index" style="width: 100%;" @click="choose(tab.value)">  
        <view class="acknowledgement">
        	<radio :value="tab.value" /> {{ tab.text }}  
        </view>
        <view v-if="tab.updated" class="updated-indicator">·有更新     <text style="color: #9e9e9e">></text></view>  
      </button>  
    </view>  
  </view>  
</template>  
  
<script>  
export default {  
  data() {  
    return {  
      activeTab: 'moreInfo', // 默认选中的选项卡  
      tabs: [  
        { text: '招生能力测试', value: 'test', updated: true },  
        { text: '我的活动', value: 'myActivities', updated: true },  
        { text: 'β我的组员', value: 'myMembers', updated: true, beta: true }, // 注意：这里添加了beta字段来表示是β版本，实际中可能需要特殊处理  
        { text: '报名审批', value: 'approval', updated: true },  
        { text: '招宣资料', value: 'materials', updated: true },  
      ],  
    };  
  },  
  methods: {  
	choose(arg) {
		uni.navigateTo({
			url: `/pages/video/${arg}/${arg}`
		})
	}
  },  
};  
</script>  
  
<style scoped> 
 page {
	 background-color: #f5f5f9;
	 
 }

.container {  
  padding-top: 20px;  
}  
.tabs {  
  display: flex;  
}  
.tab-item {  
	display: flex;
 margin-bottom:5px;
 background-color: #f8f8f8;
 justify-content: space-between;
 height: 50px;
 line-height: 50px;
}  
.updated-indicator {  
  /* 更新指示符的样式 */  
  color: red;  
}  
.bottom-nav button {  
  /* 底部导航栏按钮的样式 */  
  flex: 1;  
  text-align: center;  
  /* 其他样式 */  
}  
</style>